<template>
  <el-form ref="form" :model="form" label-width="80px">
    <!-- <el-form-item class="space">
      请选择员工
      <el-select v-model="userId" placeholder="请选择" :disabled="!showRoleCheckBox" @change="changeUserId">
        <el-option v-for="user in users" :key="user.id" :label="user.name" :value="user.id">
        </el-option>
      </el-select>
    </el-form-item> -->
    <h2 class="el-icon-user" >新增员工</h2>
    <el-form-item class="space"></el-form-item>
    <el-form-item  label="员工姓名">

      <el-input v-model="form.Name" placeholder="请输入姓名" style="width: 200px" :disabled="!showRoleCheckBox" >
      </el-input>
    </el-form-item>     
    <el-form-item label="员工账号">
       <el-input v-model="form.userName" placeholder="请输入账号" style="width: 200px" :disabled="!showRoleCheckBox">
    </el-input>
  </el-form-item >
    <el-form-item label="员工密码">
      <el-input v-model="form.password" placeholder="请输入密码" style="width: 200px" :disabled="!showRoleCheckBox">
      </el-input>
    </el-form-item>
    <el-form-item label="员工性别">
      <el-select v-model="form.value1" placeholder="请选择性别">
        <el-option v-for="item in form.man" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    
    </el-form-item>
    <el-form-item class="block" label="员工生日">
        
        <el-date-picker v-model="form.birthDay" type="date" placeholder="选择生日日期">
        </el-date-picker>
      </el-form-item>
    <el-form-item label="设置角色" v-model="checkedRoles">
      <el-checkbox v-for="role in form.roles" :label="role.name" :key="role.id" :disabled="showRoleCheckBox">
        {{role.name}}
      </el-checkbox>
      
    </el-form-item>
    <el-form-item label="启用账号">
        <el-switch v-model="form.enable" 
          >
        </el-switch>
      </el-form-item>
    <el-form-item>
        <el-button @click="updateUser">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>

  </el-form>
</template>

<script>
  import { addUser, updateUser, getAllRole , getUsers } from '@/api/module/add'
  import { get, find } from 'lodash'
  import cementTable from '@/components/cement-table'
  import { ADD_TITLE } from '@/util/constant'


  export default {
    name: 'index',
    components: {
      cementTable
    },
    data() {
      return {
        userId: '',

        checkedRoles: [],
       
        form: {
          users: [],
          man: [{
            value: '选项1',
            label: '男'
          }, {
            value: '选项2',
            label: '女'
          },
          ],
          value1: '',
          enable: false,
          birthDay: '',
          roles: [],
          Name: '',
          userName:'',
          password:'',
      
        }

      }
    },
    methods: {

      getAllRole () {
      getAllRole().then((res) => {
        this.form.roles = get(res, 'data.data', [])
        console.log(res)
      })
    },
    getUsers () {
      getUsers().then((res) => {
        this.users = get(res, 'data.data', [])
      })
    },
    addUser() {
        if (this.userName.length !== 0) {
          addUser(this.userName).then(this.userName = '')
        } else {
          this.$message.error('角色名为空')
        }
      },

      updateUser() {
        let user = find(this.users, { id: this.userId })
        let roles = []
        this.checkedRoles.forEach((roleName) => {
          Roles.push(find(this.roles, { name: roleName }))
        })
        user.roles = roles
        updateUser(user).then(() => {
          this.initData()
        })
      },

      initData() {
        this.userId = ''
        this.checkedRoles = []
      }
    },
    computed: {
      showRoleCheckBox() {
        return this.userId === ''
      }
    },
    mounted() {
      // this.getUsers()
      // this.getMenu()
      this.addUser()
      this.updateUser()
      this.getAllRole()
    }
  }
</script>

<style scoped>
  .space {
    margin-bottom: 30px;
  }

  .menu_check {
    display: flex;
    align-items: center;
  }
</style>